import { history } from 'umi';
import React from 'react';
import { Flex, Tabbar, Button, Image, Cell } from 'react-vant';
import { SafeArea, Switch } from 'antd-mobile';
import './my.less';
import { Manager, Arrow } from '@react-vant/icons';
import { Comment, Me, System, Info, FileStaffOne, Logout } from '@icon-park/react';
import order from '../assets/icons/order.svg';
import follow from '../assets/icons/follow.svg';
import help from '../assets/icons/help.svg';
import service from '../assets/icons/service.svg';
import profile from '../assets/icons/profile.svg';
import mypage from '../assets/icons/mypage.svg';
import price from '../assets/icons/price.svg';
import location from '../assets/icons/location.svg';
import achievement from '../assets/icons/achievement.svg';
import promotion from '../assets/icons/promotion.svg';

const goDiscover = () => {
  history.push('/');
}
const goMsg = () => {
  history.push('/msg');
}
const goMy = () => {
  history.push('/my');
}
const goJoin = () => {
  history.push('/join');
}
const goWithdraw = () => {
  history.push('/withdraw');
}
const goProfile = () => {
  history.push('/profile');
}
const goPrice = () => {
  history.push('/price');
}
const goGrab = () => {
  history.push('/grab');
}
const goMyOrder = () => {
  history.push('/my-order');
}
const goFollow = () => {
  history.push('/follow');
}
const goHelp = () => {
  history.push('/help');
}
const goAchievement = () => {
  history.push('/achievement');
}
const goPromotion = () => {
  history.push('/promotion');
}
const goActicle = () => {
  history.push('/article');
}

export default function MyPage() {
  const [name, setName] = React.useState('my')
  return (
    <div className='my'>
      <div className='user-box container'>
        {/*<div className='login-area'>*/}
        {/*  <Button className='login-btn' round type='primary' color='linear-gradient(to right, #ff78b7, #ff5959)'>立即登录</Button>*/}
        {/*</div>*/}
        <div className='user-info'>
          <Flex gutter={20} align='center'>
            <Flex.Item span={7} className='user-avatar'>
              <Image round width='80' height='80' fit='cover'
                     src='//res.dayupp.com/partner/9fa863d7ab9db21d6763ad29fa4695c1.jpg' />
            </Flex.Item>
            <Flex.Item span={12} className='user-name'>
              <h3 className='name'>小露</h3>
              <div className='status'>
                <div className='partner-status'>
                  <div className='kong'><i className='dot'></i>空闲</div>
                </div>
              </div>
            </Flex.Item>
            <Flex.Item span={5} className='switch-status'>
              <Switch uncheckedText='忙' checkedText='空' defaultChecked
                      style={{
                        '--checked-color': '#43cf7c'
                      }}
              />
            </Flex.Item>
          </Flex>
        </div>
      </div>
      <div className='small-container'>
        {/*如果已经是陪玩/营销搭档，则展示余额*/}
        <Flex align='center' justify='between' className='balance-box'>
          <Flex.Item>
            <span className='balance-text'>余额</span> <span className='balance'>¥<b>1050</b>.00</span>
          </Flex.Item>
          <Flex.Item>
            <Button round className='btn-withdraw' size='small' onClick={goWithdraw}>提现</Button>
          </Flex.Item>
        </Flex>
        {/*如果只是普通用户，则展示申请入口*/}
        {/*<Flex align='center' justify='between' className='reg-partner' onClick={goJoin}>*/}
        {/*  <Flex.Item><Manager className='icon' fontSize='1.25em' color='#f5d69d' /> 申请成为平台搭档</Flex.Item>*/}
        {/*  <Flex.Item><Arrow className='icon' fontSize='1.25em' color='#f5d69d' /></Flex.Item>*/}
        {/*</Flex>*/}
      </div>
      <div className='container'>
        <div className='action-area'>
          <Flex className='action-box' align='center' wrap='wrap'>
            {/*陪玩专用*/}
            <Flex.Item span={6} className='action-item' onClick={goProfile}>
              <div className='action-icon'><img className='icon profile' width='32' height='32' src={profile} alt='' /></div>
              编辑资料
            </Flex.Item>
            <Flex.Item span={6} className='action-item'>
              <div className='action-icon'><img className='icon mypage' width='32' height='32' src={mypage} alt='' /></div>
              我的主页
            </Flex.Item>
            <Flex.Item span={6} className='action-item' onClick={goPrice}>
              <div className='action-icon'><img className='icon price' width='32' height='32' src={price} alt='' /></div>
              修改单价
            </Flex.Item>
            <Flex.Item span={6} className='action-item' onClick={goGrab}>
              <div className='action-icon'><img className='icon location' width='32' height='32' src={location} alt='' /></div>
              附近抢单
            </Flex.Item>
            {/*用户通用*/}
            <Flex.Item span={6} className='action-item' onClick={goMyOrder}>
              <div className='action-icon'><img className='icon order' width='32' height='32' src={order} alt=''/></div>
              我的订单
            </Flex.Item>
            <Flex.Item span={6} className='action-item' onClick={goFollow}>
              <div className='action-icon'><img className='icon follow' width='32' height='32' src={follow} alt='' /></div>
              我的关注
            </Flex.Item>
            <Flex.Item span={6} className='action-item' onClick={goHelp}>
              <div className='action-icon'><img className='icon help' width='32' height='32' src={help} alt='' /></div>
              使用帮助
            </Flex.Item>
            <Flex.Item span={6} className='action-item'>
              <div className='action-icon'><img className='icon service' width='32' height='32' src={service} alt='' /></div>
              人工客服
            </Flex.Item>
          </Flex>
        </div>
        {/*营销专用*/}
        <div className='market-area'>
          <Flex className='market-box' align='center' justify='end'>
            <Flex.Item span={4} className='market-title'>
              营销<br />中心
            </Flex.Item>
            <Flex.Item span={10} className='market-item' onClick={goAchievement}>
              <Flex align='center' justify='center'>
                <Flex.Item><div className='market-icon'><img className='icon achievement' width='24' height='24' src={achievement} alt='' /></div></Flex.Item>
                <Flex.Item>我的业绩</Flex.Item>
              </Flex>
            </Flex.Item>
            <Flex.Item span={10} className='market-item' onClick={goPromotion}>
              <Flex align='center' justify='center'>
                <Flex.Item><div className='market-icon'><img className='icon promotion' width='24' height='24' src={promotion} alt='' /></div></Flex.Item>
                <Flex.Item>我要推广</Flex.Item>
              </Flex>
            </Flex.Item>
          </Flex>
        </div>
      </div>
      <div className='my-links container'>
        <Cell title='关于我们' icon={<Info theme='outline'/>} isLink onClick={goActicle} />
        <Cell title='用户协议' icon={<FileStaffOne theme='outline'/>} isLink onClick={goActicle} />
        <Cell title='退出登录' icon={<Logout theme='outline'/>} isLink />
      </div>
      <Tabbar value={name} onChange={v => setName(v as string)} className='tabbar' activeColor='#8c57ff' placeholder>
        <Tabbar.Item name='discover' icon={<System theme='outline' size='24'/>} onClick={goDiscover}>发现</Tabbar.Item>
        <Tabbar.Item name='message' icon={<Comment theme='outline' size='24'/>} onClick={goMsg}>消息</Tabbar.Item>
        <Tabbar.Item name='my' icon={<Me theme='outline' size='24'/>} onClick={goMy}>我的</Tabbar.Item>
      </Tabbar>
      <SafeArea position='bottom' />
    </div>
  );
}
